<template>
  <div
    class="conditions-screening-container"
    ref="conditionsScreeningContainer"
  >
    <div class="left-container-warp" ref="leftContainerWarp">
      <!-- 条件筛选区域 -->
      <div class="conditions-container">
        <slot name="conditions"></slot>
      </div>
      <!-- 右侧操作区域 -->
      <div class="operate-container">
        <slot name="operate"></slot>
        <div
          class="more-view-btn"
          v-if="showViewMore"
          @click="showAllConditions()"
        >
          {{ showAll ? "收起" : " 更多"
          }}<a-icon :class="showAll && 'close'" type="down" />
        </div>
      </div>
    </div>
    <!-- 统计、明细切换按钮 -->
    <div class="check-data-type-container" v-if="isDataType">
      <div
        class="type-button"
        :class="type == 'statistical' && 'on'"
        @click="_checkDataType('statistical')"
      >
        <a-icon type="bar-chart" />
        数据统计
      </div>
      <div class="space-line"></div>
      <div
        class="type-button"
        :class="type == 'report' && 'on'"
        @click="_checkDataType('report')"
      >
        <a-icon type="profile" />
        数据明细
      </div>
    </div>
    <!-- 右侧按钮 -->
    <div class="right-operate-contaienr">
      <slot name="rightOperate"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScreenConditions",
  props: {
    //是否显示数据类型按钮区域
    isDataType: {
      type: Boolean,
      default: true,
    },
    //数据类型切换按钮激活标识   statistical 统计  report 报表
    dataType: {
      type: String,
      default: "statistical",
    },
  },
  watch: {
    dataType: {
      handler(val) {
        this.type = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      type: "",
      showAll: false,
      initHeight: 52,
      showViewMore: false,
      resizeObserver: null,
      // 标志是否已经初始化
      isInitialized: false,
    };
  },
  mounted() {
    // 创建一个 ResizeObserver 实例
    this.resizeObserver = new ResizeObserver((entries) => {
      try {
        let entry = entries?.[0] ?? {};
        this.$nextTick((_) => {
          setTimeout((_) => {
            let { initHeight } = this;
            let dom = this.$refs["conditionsScreeningContainer"];
            this.showViewMore = entry.contentRect.height > initHeight;
            if (entry.contentRect.height <= initHeight) {
              this.showAll = false;
              dom.style.height = initHeight + "px";
            } else {
              if (!this.isInitialized) {
                this.isInitialized = true;
              } else {
                if (this.showAll) {
                  dom.style.height = "auto";
                }
              }
            }
          });
        });
      } catch (error) {}
    });

    // 开始观察目标元素
    this.resizeObserver.observe(this.$refs["leftContainerWarp"]);
  },
  methods: {
    showAllConditions() {
      let { showAll, initHeight } = this;
      let dom = this.$refs["conditionsScreeningContainer"];
      if (!showAll) {
        dom.style.height = "auto";
      }
      let { height } = dom.getBoundingClientRect();
      dom.style.height = initHeight + "px";
      dom.style.transition = "0.3s";
      //触发浏览器重排
      dom.getBoundingClientRect();
      dom.style.height = showAll ? initHeight + "px" : height + "px";
      this.showAll = !this.showAll;
    },

    _checkDataType(type = "statistical") {
      this.type = type;
      this.$emit("update:dataType", type);
      this.$emit("checkDataType", type);
    },
  },
  beforeDestroy() {
    let { initHeight } = this;
    this.showAll = false;
    this.showViewMore = false;
    this.isInitialized = false;
    let dom = this.$refs["conditionsScreeningContainer"];
    dom.style.height = initHeight + "px";
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  },
};
</script>

<style lang="less" scoped>
.conditions-screening-container {
  padding: 10px 10px 0 10px;
  height: 52px;
  background-color: @base-bg-color;
  border-radius: 6px 6px 6px 6px;
  display: flex;
  position: relative;
  z-index: 11;
  overflow: hidden;
  .left-container-warp {
    flex: 1;
    display: flex;
    height: fit-content;
  }
  .conditions-container {
    display: flex;
    flex-wrap: wrap;
    /deep/.ant-input {
      width: 183px;
      margin-right: 16px;
      margin-bottom: 10px;
    }
    /deep/.ant-input-affix-wrapper {
      width: auto !important;
      //   margin-bottom: 10px;
      .ant-input-suffix {
        right: 24px !important;
      }
    }

    /deep/.ant-calendar-picker {
      width: 366px !important;
      margin-bottom: 10px;
      .ant-input {
        width: 350px !important;
        margin-bottom: 0;
      }
      .ant-calendar-picker-icon,
      .ant-calendar-picker-clear {
        right: 24px;
      }
      &.year-picker {
        width: 183px !important;
        margin-bottom: 10px;
        .ant-input {
          width: 167px !important;
          margin-bottom: 0;
        }
      }
    }
    /deep/.ant-select {
      margin-right: 16px;
      margin-bottom: 10px;
      .ant-select-selection {
        &.ant-select-selection--single {
          width: 183px;
        }
        &.ant-select-selection--multiple {
          width: 183px;
        }
      }
    }
  }
  .operate-container {
    display: flex;
    flex-shrink: 0;
    .more-view-btn {
      color: #1890ff;
      font-size: 14px;
      height: 32px;
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      margin: 0 20px 0 10px;
      .anticon {
        margin-left: 6px;
        font-size: 12px;
        transition: 0.3s;
        transform: rotate(0deg);
        &.close {
          transform: rotate(180deg);
        }
      }
    }
    .ant-btn {
      &:last-child {
        margin-left: 4px;
      }
    }
  }
  .check-data-type-container {
    flex-shrink: 0;
    padding-left: 20px;
    display: flex;
    height: 32px;
    align-items: center;
    .space-line {
      margin: 0 10px;
      width: 1px;
      height: 16px;
      background: #cbcbcd;
    }
    .type-button {
      color: #89898b;
      flex-shrink: 0;
      cursor: pointer;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .anticon {
        margin-right: 8px;
        font-size: 17px;
      }
      &.on {
        color: var(--primary-color);
      }
    }
  }
}
</style>
